import React from 'react'
import PropTypes from 'prop-types';
import './index.scss'

import Link from 'next/link'

export default class Footer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            footerNav:[
                {txt:'首页', url:'/'},
                {txt:'产品及服务', url:'/service'},
                {txt:'经典案例', url:'/case'},
                {txt:'关于我们', url:'/about'},
                {txt:'新闻中心', url:'/newsCenter'}
                ]
        }
    }
    static getDerivedStateFromProps(nextProps){
        let footerData = nextProps.footerData

        return {
            footerData
        }
    }
    render(){
        return (
            <footer className='gp_footer'>
                <ul className='footer_nav'>
                    {
                        this.state.footerNav.map((item,index) => {
                            return (
                                <li className='nav_item' key={index}>
                                    <Link href={item.url}>
                                        <a className='nav_item_link' > {item.txt}</a>
                                    </Link>
                                </li>
                            )
                        })
                    }

                </ul>
                {
                    this.state.footerData &&
                    <div className='footer_con'>
                        <img className='footer_logo' src={this.state.footerData.tail_logo} alt=""/>
                        <div className='foo_con_fr fr'>
                            <div className='con_fr_ewm'>
                                <img src={this.state.footerData.wechat_official_account} alt=""/>
                                <span>微信公众号</span>
                            </div>
                            <div className='con_fr_ewm'>
                                <img src={this.state.footerData.official_website_qrcode} alt=""/>
                                <span>微信公众号</span>
                            </div>
                        </div>
                        <div className='footer_foo'>
                            <h2>客服热线：{this.state.footerData.customer_service_tel}</h2>
                            <h2>公司网址：{this.state.footerData.company_website}</h2>
                            <h2>公司地址：{this.state.footerData.web_site_address}</h2>
                        </div>
                    </div>
                }


            </footer>
        )
    }
}
Footer.propTypes = {
    footerData: PropTypes.object
}